<template>
  <div id="all">
    <div id="header">
      <div id="header_l">疫情总览</div>
      <div id="header_c">疫情防控中心</div>
      <div id="header_r">
        <a href="https://voice.baidu.com/act/newpneumonia/newpneumonia/?from=osari_aladin_banner" target="_blank">订阅实时疫情</a>
      </div>
    </div>
    <div id="main_body">
      <div id="main_body_l" class="fl">
        <div id="l_1" class="l_0">
          <div class="tl"></div>
          <div class="tr"></div>
          <div class="bl"></div>
          <div class="br"></div>
          <div id="l_1_1" class="currency" v-loading="loading" element-loading-background="#e8e8e8"></div>
        </div>
        <div id="l_2" class="l_0">
          <div class="tl"></div>
          <div class="tr"></div>
          <div class="bl"></div>
          <div class="br"></div>
          <div class="currency">
            <span>现有确诊</span>
            <Map></Map>
          </div>
        </div>
      </div>
      <div id="main_body_r" class="fr">
        <div id="r_1" class="r_0">
          <div class="tl"></div>
          <div class="tr"></div>
          <div class="bl"></div>
          <div class="br"></div>
          <div id="r_1_1" class="currency" v-loading="loading" element-loading-background="#e8e8e8"></div>
        </div>
        <div id="r_2" class="r_0">
          <div class="tl"></div>
          <div class="tr"></div>
          <div class="bl"></div>
          <div class="br"></div>
          <div class="currency">
            <div id="r_2_header">
              <div id="r_2_header_l">患者特征</div>
              <!-- <div id="r_2_header_r">安全防护</div> -->
              <div id="r_2_c">
                <svg :width='width' :height='height' @mousemove='listener($event)'>
                  <a :href="tag.href" target="_blank" rel="external nofollow" v-for='tag in tags'>
                    <text :x='tag.x' :y='tag.y' :font-size='20 * (600/(600-tag.z))' :fill-opacity='((400+tag.z)/600)'>{{tag.text}}</text>
                  </a>
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="main_body_c">
        <div id="c_1" class="c_0"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        ></div>
        <div id="c_2" class="c_0">
          <div class="c_0_0">
            <span class="c_0_1">戴口罩，勤洗手!</span>
          </div>
          <div class="c_0_0">
            <span class="c_0_1">积极防护，保护自己!</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { mapActions, mapState } from "vuex";
import Map from '@/components/Map'
import axios from '@/http/axios'
import { mapActions, mapState, mapGetters } from "vuex";

export default {
  // 将分页查询的数据前十项显示到折线图中
  // x轴显示省份，y轴显示确诊人数
  mounted() {
    // this.initEcharts();
    setInterval(() => {
        this.rotateX(this.speedX);
        this.rotateY(this.speedY);
    }, 30)
  },
  // 局部注册组件
  components:{
    Map
  },

  computed: {
    ...mapState("dataList", ["dataList"]),
    ...mapGetters("dataList", [
      "confirmed",
      "suspected",
      "dead",
      "cure",
      "severe",
      "outside",
    ]),
    CX(){
        return this.width/2;
      },
    CY(){
        return this.height/2;
    }
  },
  data() {
    return {
      loading: true,
      id: 0,
      width:300,
      height:300,
      tagsNum:20,
      RADIUS:200,
      speedX:Math.PI/360,
      speedY:Math.PI/360,
      tags: [],
    };
  },
  //组件销毁
  destroyed() {
    clearInterval(this.id);
  },
  created() {
    this.id = setInterval(() => {
      this.findData();
    }, 5000);
    let tags=[];
    let arr1 = ['腹泻','无力','咳嗽','呼吸困难','发热','干咳','乏力','头晕','鼻塞','低氧血症','腹泻','无力','咳嗽','呼吸困难','发热','干咳','乏力','头晕','鼻塞','低氧血症'];
    for(let i = 0; i < this.tagsNum; i++){
      let tag = {};

      let k = -1 + (2 * (i + 1) - 1) / this.tagsNum;
      let a = Math.acos(k);
      let b = a * Math.sqrt(this.tagsNum * Math.PI);
      tag.text = arr1[i];
      tag.x = this.CX + this.RADIUS * Math.sin(a) * Math.cos(b);
      tag.y = this.CY + this.RADIUS * Math.sin(a) * Math.sin(b); 
      tag.z = this.RADIUS * Math.cos(a);
      tag.href = 'https://baike.baidu.com/item/%E6%96%B0%E5%9E%8B%E5%86%A0%E7%8A%B6%E7%97%85%E6%AF%92%E8%82%BA%E7%82%8E/24282529?fr=aladdin';
      tags.push(tag);
    }
    this.tags = tags;
  },
  methods: {
    ...mapActions("dataList", ["page_query"]),
    rotateX(angleX){
        var cos = Math.cos(angleX);
        var sin = Math.sin(angleX);
        for(let tag of this.tags){
          var y1 = (tag.y- this.CY) * cos - tag.z * sin + this.CY;
          var z1 = tag.z * cos + (tag.y- this.CY) * sin;
          tag.y = y1;
          tag.z = z1;
        } 
      },
      rotateY(angleY){
        var cos = Math.cos(angleY);
        var sin = Math.sin(angleY);
        for(let tag of this.tags){
          var x1 = (tag.x - this.CX) * cos - tag.z * sin + this.CX;
          var z1 = tag.z * cos + (tag.x-this.CX) * sin;
          tag.x = x1;
          tag.z = z1;
        } 
      },
      listener(event){//响应鼠标移动
        var x = event.clientX - this.CX;
        var y = event.clientY - this.CY;
        this.speedX = x*0.0001>0 ? Math.min(this.RADIUS*0.00002, x*0.0001) : Math.max(-this.RADIUS*0.00002, x*0.0001);
        this.speedY = y*0.0001>0 ? Math.min(this.RADIUS*0.00002, y*0.0001) : Math.max(-this.RADIUS*0.00002, y*0.0001); 
      },
    initEcharts(res1, res2, res3, res4, res5, res6, res7) {
      // 销毁图表
      echarts.init(document.getElementById("c_1")).dispose();
      echarts.init(document.getElementById("l_1_1")).dispose();
      echarts.init(document.getElementById("r_1_1")).dispose();
      // 初始化图表
      var myChart = echarts.init(document.getElementById("c_1"));
      var myChart_l_1 = echarts.init(document.getElementById("l_1_1"));
      var myChart_l_2 = echarts.init(document.getElementById("r_1_1"));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "疫情图表",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["确诊", "疑似", "死亡", "治愈", "重症", "境外输入"],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          data: res1,
          axisLabel: {
            formatter(val) {
              return val.split("").join("\n");
            },
          },
        },
        yAxis: {
          type: "value",
          show:false
          // max:1600,
          // dataMax:1600,
          // min:0,
          // splitNumber:10,
        },
        series: [
          {
            data: res2,
            type: "line",
            name: "确诊",
            stack: "总量",
          },
          {
            data: res3,
            type: "line",
            name: "疑似",
            stack: "总量",
          },
          {
            data: res4,
            type: "line",
            name: "死亡",
            stack: "总量",
          },
          {
            data: res5,
            type: "line",
            name: "治愈",
            stack: "总量",
          },
          {
            data: res6,
            type: "line",
            name: "重症",
            stack: "总量",
          },
          {
            data: res7,
            type: "line",
            name: "境外输入",
            stack: "总量",
          },
        ],
      };

      var option_l_1 = {
        title: {
          text: "疫情各项数据占比",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        series: [
          {
            name: "累计",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: this.confirmed, name: "确诊"},
              { value: this.cure, name: "治愈" },
              { value: this.suspected, name: "疑似" },
              { value: this.dead, name: "死亡" },
              { value: this.severe, name: "重症" },
              { value: this.outside, name: "境外输入" },
              
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      var option_l_2 = {
      tooltip: {},
      legend: {
          data: ['确诊人数', '治愈人数']
      },
      radar: {
          // shape: 'circle',
          name: {
              textStyle: {
                  color: '#fff',
                  backgroundColor: '#999',
                  borderRadius: 3,
                  padding: [3, 5]
              }
          },
          indicator: [
              { name: res1[0], max: 1600},
              { name: res1[1], max: 900},
              { name: res1[2], max: 1400},
              { name: res1[3], max: 1100},
              { name: res1[4], max: 1000},
              { name: res1[5], max: 900},
              { name: res1[6], max: 1000},
              { name: res1[7], max: 1000},
              { name: res1[8], max: 1000},
              { name: res1[9], max: 1000},
          ]
      },
      series: [{
          name: 'vs',
          type: 'radar',
          // areaStyle: {normal: {}},
          data: [
              {
                  value: res2,
                  name: '确诊人数'
              },
              {
                  value: res5,
                  name: '治愈人数'
              }
          ]
      }]
      };
      var option_r_1={
        
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      myChart_l_1.setOption(option_l_1);
      myChart_l_2.setOption(option_l_2);
    },
    findData() {
      this.page_query({ page: 1, pageSize: 10 }).then(() => {
        let res1 = this.dataList.list.map((item) => {
          return item.province;
        });
        let res2 = this.dataList.list.map((item) => {
          return item.confirmed;
        });
        let res3 = this.dataList.list.map((item) => {
          return item.suspected;
        });
        let res4 = this.dataList.list.map((item) => {
          return item.dead;
        });
        let res5 = this.dataList.list.map((item) => {
          return item.cure;
        });
        let res6 = this.dataList.list.map((item) => {
          return item.severe;
        });
        let res7 = this.dataList.list.map((item) => {
          return item.outside;
        });
        this.initEcharts(res1, res2, res3, res4, res5, res6, res7);
      });
    },
  },
};
</script>





<style scoped>
#all {
  height: 100%;
  min-height: 600px;
  background: #e8e8e8 !important;
  background-size: 100% 100%;
}
.fl,.tl,.bl {
  float: left;
}
.fr,.tr,.br {
  float: right;
}
#header {
  border: 0.5px solid red;
  position: relative;
  height: 40px;
}
#header_l,#header_c,#header_r {
  position: absolute;
  top: 6px;
  width: 23%;
  height: 28px;
  line-height: 28px;
  color: #b0bbcf;
  text-align: center;
  background-color: rgb(201, 49, 22);
  border-radius: 5px;
}
#header_l {
  letter-spacing: 20px;
  display: inline-block;
}
#header_c {
  letter-spacing: 15px;
  left: 40%;
}
#header_r {
  right: 0px;
}
#main_body {
  height: 680px;
}
#main_body_l,#main_body_r {
  width: 23%;
  height: 100%;
}
#main_body_c {
  margin: 0 23%;
  height: 100%;
}
.l_0,.r_0 {
  height: 50%;
}
#l_1,#l_2,#r_1,#r_2 {
  position: relative;
}
.currency span{
  color:#DC143C;
  text-align: center;
  font-size: 20px;
}
.tl,.tr,.bl,.br {
  position: absolute;
  width: 16px;
  height: 16px;
}
.tl {
  border-top: 2px solid red;
  border-left: 2px solid red;
}
.tr {
  right: 0;
  border-top: 2px solid red;
  border-right: 2px solid red;
}
.bl {
  bottom: 0;
  border-bottom: 2px solid red;
  border-left: 2px solid red;
}
.br {
  bottom: 0;
  right: 0;
  border-bottom: 2px solid red;
  border-right: 2px solid red;
}
.currency {
  height: 100%;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.c_0 {
  border: 0.5px solid red;
}
#c_1 {
  height: 70%;
}
#c_2 {
  height: 30%;
}
.c_0_0 {
  height: 50%;
  text-align: center;
  font-size: 70px;
  line-height: 100px;
  color: red;
}
.c_0_1 {
  border-radius: 5px;
  background-color: #f5f5f5;
}
#r_2_header{
  text-align: center;
}
#r_2_header_l{
  color:red;
  width: 70px;
  opacity: .25;
  cursor: pointer;
  display: inline-block;
}
#r_2_c{
  overflow: hidden;
}
</style>